<!DOCTYPE html><!--[if lt IE 7 ]> <html class="ie ie6 no-js" lang="en"> <![endif]--><!--[if IE 7 ]> <html class="ie ie7 no-js" lang="en"> <![endif]--><!--[if IE 8 ]> <html class="ie ie8 no-js" lang="en"> <![endif]--><!--[if IE 9 ]> <html class="ie ie9 no-js" lang="en"> <![endif]--><!--[if gt IE 9]><!--><html class="no-js" lang="en"><!--<![endif]--> <head><meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>漂亮的CSS3 Lightbox</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content="CSS3 Lightbox - A CSS-only lightbox" /> <meta name="keywords" content="css3, lightbox, overlay, effect, images, thumbnails" /> <meta name="author" content="Codrops" /> <link rel="shortcut icon" href="../favicon.ico"> <link rel="stylesheet" type="text/css" href="css/demo.css" /> <link rel="stylesheet" type="text/css" href="css/style.css" /> </head> <body id="page"> <div class="container"><!-- Codrops top bar --> <div class="codrops-top"> <div class="clr"></div> </div><!--/ Codrops top bar --><header><h1>CSS3 <span>Lightbox</span></h1><h2>A simple CSS-only lightbox experiment</h2><p class="codrops-demos"><a class="current-demo" href="index.html">Demo 1</a><a href="index2.html">Demo 2</a><a href="index3.html">Demo 3</a></p></header><section><ul class="lb-album"><li><a href="#image-1"><img src="images/thumbs/1.jpg" alt="image01"><span>Pointe</span></a><div class="lb-overlay" id="image-1"><a href="#page" class="lb-close">x Close</a><img src="images/full/1.jpg" alt="image01" /><div><h3>pointe <span>/point/</h3><p>Dance performed on the tips of the toes</p></div></div></li><li><a href="#image-2"><img src="images/thumbs/2.jpg" alt="image02"><span>Port de bras</span></a><div class="lb-overlay" id="image-2"><img src="images/full/2.jpg" alt="image02" /><div><h3>port de bras <span>/ˌpôr də ˈbrä/</h3><p>An exercise designed to develop graceful movement and disposition of the arms</p></div><a href="#page" class="lb-close">x Close</a></div></li><li><a href="#image-3"><img src="images/thumbs/3.jpg" alt="image03"><span>Plié</span></a><div class="lb-overlay" id="image-3"><img src="images/full/3.jpg" alt="image03" /><div><h3>pli·é <span>/plēˈā/</h3><p>A movement in which a dancer bends the knees and straightens them again</p></div><a href="#page" class="lb-close">x Close</a></div></li><li><a href="#image-4"><img src="images/thumbs/4.jpg" alt="image04"><span>Adagio</span></a><div class="lb-overlay" id="image-4"><img src="images/full/4.jpg" alt="image04" /><div><h3>a·da·gio <span>/əˈdäjō/</h3><p>A movement or composition marked to be played adagio</p></div><a href="#page" class="lb-close">x Close</a></div></li><li><a href="#image-5"><img src="images/thumbs/5.jpg" alt="image05"><span>Frappé</span></a><div class="lb-overlay" id="image-5"><img src="images/full/5.jpg" alt="image05" /><div><h3>frap·pé<span>/fraˈpā/</h3><p>Involving a beating action of the toe of one foot against the ankle of the supporting leg</p></div><a href="#page" class="lb-close">x Close</a></div></li><li><a href="#image-6"><img src="images/thumbs/6.jpg" alt="image06"><span>Glissade</span></a><div class="lb-overlay" id="image-6"><img src="images/full/6.jpg" alt="image06" /><div><h3>glis·sade <span>/gliˈsäd/</h3><p>One leg is brushed outward from the body, which then takes the weight while the second leg is brushed in to meet it</p></div><a href="#page" class="lb-close">x Close</a></div></li><li><a href="#image-7"><img src="images/thumbs/7.jpg" alt="image07"><span>Jeté</span></a><div class="lb-overlay" id="image-7"><img src="images/full/7.jpg" alt="image07" /><div><h3>je·té <span>/zhə-ˈtā/</h3><p>A springing jump made from one foot to the other in any direction</p></div><a href="#page" class="lb-close">x Close</a></div></li><li><a href="#image-8"><img src="images/thumbs/8.jpg" alt="image08"><span>Piqué</span></a><div class="lb-overlay" id="image-8"><img src="images/full/8.jpg" alt="image08" /><div><h3>pi·qué <span>/pēˈkā/</h3><p>Strongly pointed toe of the lifted and extended leg sharply lowers to hit the floor then immediately rebounds upward</p></div><a href="#page" class="lb-close">x Close</a></div></li><li><a href="#image-9"><img src="images/thumbs/9.jpg" alt="image09"><span>Arabesque</span></a><div class="lb-overlay" id="image-9"><img src="images/full/9.jpg" alt="image09" /><div><h3>ar·a·besque <span>/ˌarəˈbesk/</h3><p>Position of the body supported on one leg, with the other leg extended behind the body with the knee straight</p></div><a href="#page" class="lb-close">x Close</a></div></li><li><a href="#image-10"><img src="images/thumbs/10.jpg" alt="image10"><span>Ballerina</span></a><div class="lb-overlay" id="image-10"><img src="images/full/10.jpg" alt="image10" /><div><h3>bal·le·ri·na <span>/ˌbaləˈrēnə/</h3><p>A female ballet dancer</p></div><a href="#page" class="lb-close">x Close</a></div></li></ul></section> </div> </body></html>
评论